/*
 * @Author: wangtao
 * @Date: 2020-06-29 16:32:41
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-04-21 19:29:38
 * @Description: file content
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
} from 'react-native';
import {
  mainBgColorWhite,
  screenWidth,
  px2dp,
} from '@/styles';
import { FormSelect, FormInput, Button } from '@/common';

const { Submit } = Button;

export default class ApplyForm extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  render() {
    const {
      carNo,
      engineNo,
      carType,
      insureLinkMan,
      insureLinkPhone,
      carframeNo,
      showPicker,
      carOwnerType,
      carOwnerTypeOptions,
      inCompanyName,
      allCompanyOptions,
      carOwnerName,
      onChange,
    } = this.props;
    return (
      <View style={styles.wrap}>
        <FormInput
          style={{ height: px2dp(120) }}
          label='车牌号/发动机号'
          labelWidth={{ width: px2dp(234) }}
          textStyles={{ textAlign: 'left' }}
          placeholder='请输入车牌号或发动机号'
          defaultValue={carNo || engineNo}
          inputType={1}
          disabled
          required
        />
        <FormInput
          style={{ height: px2dp(120) }}
          label='车辆种类'
          labelWidth={{ width: px2dp(234) }}
          textStyles={{ textAlign: 'left' }}
          placeholder='请选择车辆种类'
          defaultValue={carType || '-'}
          inputType={1}
          disabled
          required
        />
        <FormInput
          style={{ height: px2dp(120) }}
          label='车架号'
          labelWidth={{ width: px2dp(234) }}
          textStyles={{ textAlign: 'left' }}
          placeholder='请输入车架号'
          defaultValue={carframeNo}
          inputType={1}
          onChange={(val) => { onChange('carframeNo', val); }}
          required
        />
        <FormInput
          style={{ height: px2dp(120) }}
          label='投保联系人'
          labelWidth={{ width: px2dp(234) }}
          textStyles={{ textAlign: 'left' }}
          placeholder='请输入投保联系人'
          defaultValue={insureLinkMan}
          inputType={1}
          disabled
          required
        />
        <FormInput
          style={{ height: px2dp(120) }}
          label='投保联系方式'
          labelWidth={{ width: px2dp(234) }}
          textStyles={{ textAlign: 'left' }}
          placeholder='请输入投保联系方式'
          defaultValue={insureLinkPhone}
          inputType={1}
          disabled
          required
        />
        <FormSelect
          style={{ height: px2dp(120), paddingRight: px2dp(32) }}
          label='所属物流公司'
          labelWidth={{ width: px2dp(240) }}
          textStyles={{ textAlign: 'left' }}
          placeholder='请选择所属物流公司'
          iconVisible
          selected={{ value: inCompanyName }}
          onPress={() => { showPicker('请选择所属物流公司', allCompanyOptions, 'inCompanyName'); }}
          required
        />
        <FormSelect
          style={{ height: px2dp(120), paddingRight: px2dp(32) }}
          label='车主类型'
          labelWidth={{ width: px2dp(240) }}
          textStyles={{ textAlign: 'left' }}
          placeholder='请选择车主类型'
          iconVisible
          selected={{ value: carOwnerType.name }}
          onPress={() => { showPicker('请选择车主类型', carOwnerTypeOptions, 'carOwnerType'); }}
          required
        />
        <FormInput
          style={{ height: px2dp(120) }}
          label='车主名称'
          labelWidth={{ width: px2dp(234) }}
          textStyles={{}}
          placeholder='请输入车主名称'
          defaultValue={carOwnerName}
          inputType={1}
          onChange={(val) => { onChange('carOwnerName', val); }}
          required
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  wrap: {
    width: screenWidth,
    backgroundColor: mainBgColorWhite,
    paddingLeft: px2dp(32),
  },
});
